<template>
  <div>
    <qa-dialog title="选择" v-model="show" :width="multiple ? 1200 : 600">
      <el-divider />
      <qa-table-query :columns="queryForm.columns" v-model="queryForm.formData" @search="search"></qa-table-query>
      <div class="flex align-center justify-between gap-[20px]">
        <qa-table ref="tableRef" :action="action" :columns="columns" :query-form-param="queryForm" :height="400"
          @select-selection-change="selectionChange"
          @select-cell-radio-click="cellRadioClick"
          :selectionData="selectionData"
          type="table-select" :defaultSelectValue="modelValue"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :row-no="false" :multiple="multiple"
          :border="true" :selection="true" :pagination="true" size="default" :idKey="idKey"
          :nameKey="nameKey"></qa-table>

        <el-table v-if="multiple" :data="selectionData" :height="400" border
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
          <qa-table-column :label="columns[0].title" :prop="columns[0].key" :type="columns[0].type"></qa-table-column>
          <el-table-column align="center" fixed="right">
            <template #header>
              操作
            </template>
            <template #default="scope">
              <el-button type="danger" @click="removeSelect(scope.row, scope.$index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div class="dialog-footer flex justify-end">
          <el-button @click="close">关闭</el-button>
          <el-button type="primary" @click="submitSelect">
            确定
          </el-button>
        </div>
      </template>
    </qa-dialog>
  </div>
</template>

<script setup lang="ts">
import qaDialog from './qa-dialog.vue';
import qaTable from './qa-table.vue';

const tableRef = ref<InstanceType<typeof qaTable> | null>(null);
interface Columns {
  key: string;
  title: string;
  type: string;
  width?: number; // 可选字段
  minWidth?: number;
  align?: string;
  mode?: string;
  disabled?: boolean;
  data?: any[];
  labelWidth?: number; // 添加 labelWidth 属性
  nameKey?: boolean;
}

const props = withDefaults(
  defineProps<{
    action?: string;
    modelValue?: any;
    columns?: Columns[];
    queryColumns?: Columns[];
    multiple?: boolean;
    nameKey?: string;
    defaultSelectValue?: any;
    idKey?: string;
  }>(),
  {
    multiple: false,
    idKey: '_id',
    nameKey: '',
    columns: () => ([]),
    queryColumns: () => ([])
  }
)



const emit = defineEmits(['tableSelectConfirm'])

const queryForm = ref({
  formData: {},
  columns: props.queryColumns
})
const search = () => {
  if (tableRef.value) {
    (tableRef.value as { Search: () => void }).Search();
  }
}


const removeSelect = (row: any, index: number) => {
  if (selectionData.value) {
    selectionData.value.splice(index, 1)
  }
  tableRef.value && tableRef.value.toggleRowSelection(row)
}


const selectionData = ref([])
const selectionChange = (val: any) => {
  selectionData.value = val
}

const cellRadioClick = (row: any) => {
  selectionData.value = row
  emit('tableSelectConfirm', row)
}

const submitSelect = () => {
  emit('tableSelectConfirm', selectionData.value)
  close()
}

const show = ref(false)

watch(show, () => {
  nextTick(() => {
    tableRef.value && tableRef.value.initTableSelection()
  })
})

const open = () => {
  show.value = true
  search()
}

const close = () => {
  show.value = false
}

defineExpose({
  open
})

</script>

<style scoped></style>
